<template>
  <!--巡检记录附件-->
  <div v-dialog-drag>
    <el-dialog title="附件" :visible.sync="dialogVisible" z-index="1999" align="center" width="30%">
      <el-table :data="tableData" :border="true" size="mini">

        <el-table-column label="序号" type="index" align="center"/>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.file_type == '1'">图片</span>
            <span v-if="scope.row.file_type != '1'">文件</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="file_name" align="center"/>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
             <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-dialog>
         <!-- 图片预览 -->
    <el-image-viewer z-inex="3000" v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
  </div>
</template>

<script>
import { progre } from '@/api/maintain'
import { spectionPlanFileTaskList,delPlanFile } from '@/api/operations'

export default {
  name: 'inspectionRecordSee',
   components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      dialogVisible: false,
      param:{
        plan_id:'1',
        offset: 0,
        limit: 50,

      },
      tableData: [],
       imgViewerVisible: false, // 图片预览标识
         imgList: [], // 预览图片数据
    }
  },
  methods: {
    // 打开弹窗
    open(row) {
      // 修改打开弹窗的变量为true，就可以打开弹窗了
      this.dialogVisible = true;

      this.param.plan_id = row.id;
      spectionPlanFileTaskList(this.param).then(res=>{
        this.tableData = res.data.files;
      })
    },
       // 关闭图片预览
    closeImgViewer() {
      this.imgViewerVisible = false
    },
     // 删除附件
      del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPlanFile({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
             // 调用附件接口
        let fileParams = {
          offset: 0,
          limit: 20,
          plan_id: id
        };
        spectionPlanFileTaskList(fileParams).then(res => {
          this.tableData = res.data.files;
          //有附件
          if(this.fileList.length > 0) {
            this.showFileList = true;
          }else{
            this.showFileList = false;
            this.tableData.push({
              name: '无上传附件'
            });
          }
        });
        })
      })
    },
      /**
     * @description: 查看附件/图片
     * @author: 书童
     */
    checkInfo(row) {
      console.log(row.file_url)
      if (row.file_type === '1') {
        // 图片
        this.imgViewerVisible = true
        this.imgList = [row.file_url]
      } else {
        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.file_url)
      }
    },
  }
}
</script>

<style scoped>

</style>
